<template>
	<view>
		<view class="navbar-fixed" :style="{background: params.navColor}">
			<!-- 状态栏小程序撑起高度 -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="cu-bar"  :style="{ height:navBarHeight + 'px',background: params.navColor,lineHeight:navBarHeight +'px'}">
				<view class="action" @click="returnPage" v-if="params.return==1">
					<text class="iconfont icon-Arrow-1 f-35 fw-700"></text>
					<text style='margin-left: 10upx;'>{{ params.lefTitle}}</text>
					</view>
				<view class="content text-bold">{{ params.title }}</view>
			</view>
		</view>
		<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
	</view>
</template>

<script setup lang="ts">
const statusBarHeight = ref(20)
const navBarHeight = ref(45 )
const windowWidth = ref(375 )
const val = ref('')
const userStore = useUserStore();
defineProps({
  params: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const getSystem = ()=>{
    const info:any = uni.getSystemInfoSync();
		// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
		statusBarHeight.value = info.statusBarHeight;
		windowWidth.value = info.windowWidth;
		// 除了h5 app mp-alipay的情况下执行
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		// 获取胶囊的位置
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		console.log(menuButtonInfo);
		// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
		navBarHeight.value = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight);
		windowWidth.value = menuButtonInfo.left;
		// #endif
}
getSystem()
console.log(userStore.token)
const returnPage = ()=>{
//    uni.navigateBack();
}
</script>

<style  lang="scss">
.navbar-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	background-color: #fff;
	box-sizing: border-box;
}
.cu-bar {
	background-color: #fff;
	min-height: 0;
}
.action{
    position: absolute;
}
.content{
    text-align: center;
}
</style>